<template>
  <div class="bar" ref="pieRef"></div>
</template>
<script setup>
import { ref, watch } from "vue";
import useChart from "@/hooks/useCharts";

let props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

let baseOption = {
  grid: {
    top: "5%",
    left: "0%",
    right: "5%",
    bottom: "0%",
    containLabel: true,
  },

  tooltip: {
    show: "true",
    trigger: "axis",
    axisPointer: {
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  xAxis: {
    type: "value",
    axisTick: {
      // 是否居中展示
      alignWithLabel: true,
    },
    axisLabel: {
      color: "#CCC",
    },
    axisLine: {
      color: "#fff",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#fff",
      },
    },
  },
  yAxis: [
    {
      type: "category",
      axisLabel: {
        color: "#CCC",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff",
        },
      },
      data: props.data.ydata,
    },
  ],
  series: [
    {
      name: "ct时间",
      type: "bar",
      itemStyle: {
        show: true,
        color: "#00feef",
        borderRadius: 5,
        borderWidth: 0,
      },
      barWidth: "50%",
      data: props.data.sdata,
    },
  ],
};

const pieRef = ref(null);
const { updateDraw } = useChart(pieRef, baseOption);

watch(
  () => props.data,
  (val) => {
    updateDraw({
      yAxis: { data: val.ydata },
      series: [{ data: val.sdata }],
    });
  },
  { deep: true }
);
</script>
<style scoped lang="scss">
.bar {
  width: 100%;
  height: 100%;
}
</style>
